<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    

    <div id="app">
        <h2>{{title}}</h2>
        <h2 v-if="awe"> v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染 </h2>
        <h2 v-else> v-else (必须贴着最近的v-if ) </h2>
        <h2>hehhehe</h2>
        <button @click="awe=!awe">点击切换</button>

        <div v-if="ok">
            <h1>123</h1>
            <p>456</p>
        </div>

        <div>
            <h2>分数成绩：</h2>
            <h4 v-if="score>90">A</h4>
            <h4 v-else-if="score>80">B</h4>
            <h4 v-else-if="score>70">C</h4>
            <h4 v-else-if="score>60">D</h4>
            <h4 v-else>E</h4>
        </div>

        <div>
            <h2 v-show="show"> v-show 只是简单地切换元素的 CSS property display </h2>
            <h2 v-show="!show"> 我会一直存在页面上 不会移除 </h2>
            <button @click="show=!show" >点击切换</button>
        </div>

        <div v-if="userInfo">
            <h2>用户信息：</h2>
            <p>用户名：{{userInfo.username}}</p>
            <p>手机号：{{userInfo.phone}}</p>
        </div>

        <!-- v-if 与 v-for 一起使用 (不推荐)
        如果一定要用  
        v-for 比 v-if 有更高的优先级 
        v-if 写在 v-for(循环) 的外面  -->
        <div v-if="true">
            <h2 v-for="(v,i) in 10" :key="i">{{v}}</h2>
        </div>
    </div>


    <script>
        const vm = new Vue({
            data:{
                title:"v-if  和  v-show ",
                awe:true ,
                ok:true,
                score:12,
                show:true,
                userInfo:null  //ajax 异步数据
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML=this.title;

                setTimeout(()=>[
                    this.userInfo={
                        username:'dadad',
                        phone:'121212'
                    }
                ],1000)
            },
        }).$mount('#app')

    </script>
    <!-- 
        v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 
        表达式的值 为 false 则什么都不做 不会渲染DOM 
        template 包裹的空元素    没有任何效果

        v-else 必须 与它最近的 v-if 匹配 

        v-show   指令通过 display 来控制显示和隐藏 
        带有 v-show的元素 会始终渲染到DOM  只是简单的样式切换 

        v-if vs v-show 
        v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 
        v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换    

        使用场景 (使用频率)
        v-if 有更高的切换开销  在切换条件很少改变的情况下  推荐使用 v-if   v-if 现实初始化内部的数据变量 
        v-show 有更高的初始渲染开销  需要频繁的切换的情况下 推荐使用 v-show 

        v-if 与 v-for 一起使用 (不推荐)
        如果一定要用  
        v-for 比 v-if 有更高的优先级 
        v-if 写在 v-for(循环) 的外面 

        异步数据 
        错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 
        TypeError: Cannot read property 'username' of null 
    -->
</body>
</html>